// 在这里写redux的基础代码是为了方便.redux不依赖于react.在任何可以运行js的地方都可以运行redux

// 创建store对象
// applyMiddleware 用来使用中间件的函数
// combineReducers 用来合并reducer函数的
import { createStore, applyMiddleware, combineReducers } from 'redux'

// 引入中间件redux-thunk
import thunk from 'redux-thunk'

// 引入使用redux调试工具的包
import { composeWithDevTools } from 'redux-devtools-extension'

function zsReducer(state = { count: 999 }, action) {
  switch (action.type) {
    case 'ADD':
      // 注意:redux中不能直接修改state数据. 按照redux的语法,reducer函数中返回值什么是什么,则store中的数据就被改成了什么
      // state.count = state.count + 1
      const newCount = state.count + 1
      return {
        ...state, //展开state,目的是为了保留其他数据
        // count: 1,
        // msg: 'hello redux'
        count: newCount,
      }
    case 'SUB':
      return {
        ...state, //展开state,目的是为了保留其他数据
        // count: 1,
        // msg: 'hello redux'
        count: state.count - 1,
      }
    // 注意: reducer函数中,必须写一个default.default中必须return state. 因为这段代码才是真正初始化store对象中state数据的代码
    default:
      return state
  }
}

function lsReducer(state = { msg: 'hello redux' }, action) {
  switch (action.type) {
    case 'SET_MSG':
      return {
        ...state,
        msg: action.target, // action.target是未来要修改msg数据时传入的msg的目标值.target属性名也是随便起的
      }
    // 注意: reducer函数中,必须写一个default.default中必须return state. 因为这段代码才是真正初始化store对象中state数据的代码
    default:
      return state
  }
}
// 注意: 由于协作开发,需要定义多个reducer函数.但是创建store时,只能传入一个reducer.所以就需要将多个reducer函数合并成一个
const rootReducer = combineReducers({
  zs: zsReducer,
  ls: lsReducer,
})
// console.log(rootReducer)

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
)
